<template>
	<view class="device-list">
		<g-navbar title="终端查询" />
		<view class="search-bar">
			<view class="input-wrapper">
				<input type="text" class="search-input" v-model="search_sn" placeholder="请输入设备SN号"
					placeholder-class="placeholder-class" />
				<i class="iconfont icon-search icon" />
			</view>
			<g-button btn_text="搜索" :width="160" :height="60" :borderRadius="16" :fontSize="28"
				@click="search"></g-button>
		</view>
		<scroll-view scroll-y class="device-list" @scrolltolower="scrolltolower">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" v-for="item,index in deviceList" :key="item.model_sn"
					@click="unbindDevice(item.model_sn,index)" @change="swipeChange"
					@longpress="longpress(item.model_sn,index)">
					<view class="device-item">
						<view class="item-cell" v-for="cellItem in parameterList" :key="cellItem">
							<view class="label">
								{{cellItem.label}}：
							</view>
							<view class="value">
								{{item[cellItem.key]?item[cellItem.key]:'暂无信息'}}
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<uni-load-more iconType="circle" :status="status" @click="getDeviceList" />
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { Ref, ref } from 'vue';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	// enum ACTIVATE_TYPE {
	// 	UNACTIVATED = 1,
	// 	ACTIVATED,
	// }

	interface IDeviceDetail {
		model_sn : string; //设备编号
		model_type_id : number; //品牌分类id
		// activate_time : string | null; //激活时间
		// activate : ACTIVATE_TYPE //1：未激活2：已激活
		open_time : string | null; //开通时间
		product_type_name : string; //品牌分类名
		activate_info : string; //激活状态
	}

	interface IParameter {
		key : keyof IDeviceDetail,
		label : string;
	}

	const parameterList : IParameter[] = [
		{
			key: 'model_sn',
			label: '设备编号',
		},
		{
			key: 'product_type_name',
			label: '品牌名称',
		},
		// {
		// 	key: 'activate_time',
		// 	label: '激活时间',
		// },
		// {
		// 	key: 'activate_info',
		// 	label: '激活状态',
		// },
		{
			key: 'open_time',
			label: '开通时间',
		},
	];

	const options = [{
		text: '解绑',
		style: {
			backgroundColor: '#dd524d'
		}
	}
	]

	const deviceList : Ref<IDeviceDetail[]> = ref([]);

	const store = useStore();

	const pageNum : Ref<number> = ref(1);

	const pageSize = 20;

	const search_sn : Ref<string> = ref('');

	const status : Ref<LOADING_STATUS> = ref(LOADING_STATUS.MORE);

	const swipeChange = (e) => {
		console.log(e)
	}
	const longpress = (model_sn : string, index : number) => {
		// #ifdef MP-WEIXIN
		unbindDevice(model_sn,index);
		// #endif
	}

	const getDeviceList = async () => {
		uni.loginManger.$interceptor;
		status.value = LOADING_STATUS.LOADING;
		const { data, total } = (await uni.http.POST(REST_URL.getDeviceList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: pageNum.value,
			page_num: pageSize,
			model_sn: search_sn.value,
		})).data;
		deviceList.value.push(...data);
		pageNum.value++;
		status.value = deviceList.value.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
	}

	const scrolltolower = () => {
		if (status.value === LOADING_STATUS.LOADING) {
			return
		}
		getDeviceList();
	}



	const search = () => {
		pageNum.value = 1;
		status.value = LOADING_STATUS.MORE;
		deviceList.value = [];
		getDeviceList();
	}

	const unbindDevice = (model_sn : string, index : number) => {
		uni.showModal({
			title: '解绑设备',
			content: `是否确认解绑SN号为${model_sn}的设备`,
			confirmText: '确认',
			cancelText: '取消',
			success: async (res) => {
				if (res.confirm) {
					await uni.http.POST(REST_URL.unbindDevice, {
						customer_id: store.getters[GET_STORE_USERINFO].id,
						model_sn,
					})
					uni.prompt.$showToast('已成功解绑设备');
					deviceList.value.splice(index, 1);
				}
			}
		})
	}

	getDeviceList();
</script>

<style scoped lang="scss">
	@import "./deviceList.scss";
</style>